<template>
  <v-chart :option="option" autoresize :loading="load" class="pack"/>
</template>

<script>
import {defineComponent, ref} from "vue";

export default defineComponent({
  //多折线图
  name: "GradientCoverageLineChart",
  data(){
    let load = false
    let option = {
      backgroundColor: '#132f4a00',
      textStyle: {
        color: '#FFF'
      },
      grid: {
        left: '9%',
        right: '15%',
        bottom: '14%',
        top: '18%',
        // containLabel: true
      },
      title: {
        show: false
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#0A2945',
        // valueFormatter: value => value + '%',
        textStyle: {
          color: '#FFF'
        },
        extraCssText: 'box-shadow: 1px 1px 5px #fff'
      },
      legend: {
        // data: ['AI A-FCST', '人工', 'C-FCST', 'C-FCST Qty', 'AI A-FCST Qty', '人工 Qty', 'AD Qty'],
        textStyle: {
          color: '#d0d0d0',
          align: 'center',
          fontSize: 13
        },
        top: '8%',
        x: 'center',
      },

      xAxis: {
        type: 'category',
        // boundaryGap: false,
        data: ["2023/10/09", "2023/10/16", "2023/10/23", "2023/10/30", "2023/11/06", "2023/11/13", "2023/11/20", "2023/11/27", "2023/12/04", "2023/12/11", "2023/12/18", "2023/12/25", "2024/01/01", "2024/01/08", "2024/01/15", "2024/01/22", "2024/01/29", "2024/02/05", "2024/02/12"].map((week) => (`WK${week.slice(5)}`))
      },

      yAxis: [
        {
          type: 'value',
          splitLine: {
            // show: false,
            lineStyle: {
              opacity: 0.5
            }
          },
        },
        {
          type: 'value',
          splitLine: {
            show: false,

            lineStyle: {
              opacity: 0.5
            }
          },
          yAxisIndex: 1,
        }
      ],
      dataZoom: [
        {
          show: true,
          height: 12,
          xAxisIndex: [0],
          bottom: '8%',
          start: 10,
          end: 90,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5',
          },
          color: '#fff',
          borderColor: '#90979c'
        },
        {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }
      ],
      series: [
        {
          name: 'C-FCST',
          type: 'line',
          stack: 'Total',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 13,
          // lineStyle: {
          //    color: '#00ca95',
          // },
          label: {
            // normal: {
            //   textStyle: {
            //     color: '#fff'
            //   }
            // },
            show: true,
            position: 'top',
            fontSize: 14,
            color: '#00ca95',
            formatter: '{c}%'
          },
          // itemStyle: {
          //    color: '#00ca95',
          //    borderColor: '#fff',
          //    borderWidth: 0,
          // },
          // areaStyle: {
          //    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
          //       [
          //          { offset: 0, color: 'rgba(0,202,149, 0.3)' },
          //          { offset: 1, color: 'rgba(0,202,149, 0)' },
          //       ],
          //       false
          //    ),
          //    shadowColor: 'rgba(0,202,149, 0.9)',
          //    shadowBlur: 20,
          // },
          data: [68.82, 67.57, 54.07, 41.56, 32.04, 6.71, 22.74, 274.58,]
        },
        {
          name: 'MPSP',
          type: 'line',
          stack: 'Total',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 13,
          // lineStyle: {
          //    color: '#00ca95',
          // },
          label: {
            show: true,
            position: 'top',
            fontSize: 14,
            color: '#00ca95',
            formatter: '{c}%'
          },
          // itemStyle: {
          //    color: '#00ca95',
          //    borderColor: '#fff',
          //    borderWidth: 0,
          // },
          // areaStyle: {
          //    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
          //       [
          //          { offset: 0, color: 'rgba(0,202,149, 0.3)' },
          //          { offset: 1, color: 'rgba(0,202,149, 0)' },
          //       ],
          //       false
          //    ),
          //    shadowColor: 'rgba(0,202,149, 0.9)',
          //    shadowBlur: 20,
          // },
          data: [90.52, 86.02, 72.61, 81.98, 73.49, 45.65, 70.38, 212.88]
        },
        {
          name: 'AI A-FCST',
          type: 'line',
          stack: 'Total',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 13,
          // lineStyle: {
          //    color: '#00ca95',
          // },
          label: {
            show: true,
            position: 'top',
            fontSize: 14,
            color: '#00ca95',
            formatter: '{c}%'
          },
          // itemStyle: {
          //    color: '#00ca95',
          //    borderColor: '#fff',
          //    borderWidth: 0,
          // },
          // areaStyle: {
          //    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
          //       [
          //          { offset: 0, color: 'rgba(0,202,149, 0.3)' },
          //          { offset: 1, color: 'rgba(0,202,149, 0)' },
          //       ],
          //       false
          //    ),
          //    shadowColor: 'rgba(0,202,149, 0.9)',
          //    shadowBlur: 20,
          // },
          data: [67.69, 55.91, 49.82, 48.66, 22.49, 20.46, 25.01, 262.71]
        },
        {
          name: 'AD Qty',
          type: 'line',
          stack: 'Total',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 13,
          // lineStyle: {
          //    color: '#00ca95',
          // },
          label: {
            show: true,
            position: 'top',
            fontSize: 14,
            color: '#00ca95',
            formatter: '{c}'
          },
          // itemStyle: {
          //    color: '#00ca95',
          //    borderColor: '#fff',
          //    borderWidth: 0,
          // },
          // areaStyle: {
          //    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
          //       [
          //          { offset: 0, color: 'rgba(0,202,149, 0.3)' },
          //          { offset: 1, color: 'rgba(0,202,149, 0)' },
          //       ],
          //       false
          //    ),
          //    shadowColor: 'rgba(0,202,149, 0.9)',
          //    shadowBlur: 20,
          // },
          data: [...Array(8).fill(null), 10000, 14000, 16000],
          yAxisIndex: 1
        },
        {
          name: 'C-FCST Qty',
          type: 'line',
          stack: 'Total',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 13,
          // lineStyle: {
          //    color: '#00ca95',
          // },
          label: {
            show: true,
            position: 'top',
            fontSize: 14,
            color: '#00ca95',
            formatter: '{c}'
          },
          // itemStyle: {
          //    color: '#00ca95',
          //    borderColor: '#fff',
          //    borderWidth: 0,
          // },
          // areaStyle: {
          //    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
          //       [
          //          { offset: 0, color: 'rgba(0,202,149, 0.3)' },
          //          { offset: 1, color: 'rgba(0,202,149, 0)' },
          //       ],
          //       false
          //    ),
          //    shadowColor: 'rgba(0,202,149, 0.9)',
          //    shadowBlur: 20,
          // },
          data: [...Array(11).fill(null), 16756, 21232, 22515, 28134, 13984, 28873, 24521, 20786],
          yAxisIndex: 1
        },
        {
          name: 'MPSP Qty',
          type: 'line',
          stack: 'Total',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 13,
          // lineStyle: {
          //    color: '#00ca95',
          // },
          label: {
            show: true,
            position: 'top',
            fontSize: 14,
            color: '#00ca95',
            formatter: '{c}'
          },
          // itemStyle: {
          //    color: '#00ca95',
          //    borderColor: '#fff',
          //    borderWidth: 0,
          // },
          // areaStyle: {
          //    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
          //       [
          //          { offset: 0, color: 'rgba(0,202,149, 0.3)' },
          //          { offset: 1, color: 'rgba(0,202,149, 0)' },
          //       ],
          //       false
          //    ),
          //    shadowColor: 'rgba(0,202,149, 0.9)',
          //    shadowBlur: 20,
          // },
          data: [...Array(11).fill(null), 13845, 15069, 20967, 12913, 11559, 11776, 19857, 20432],
          yAxisIndex: 1
        },
        {
          name: 'AI A-FCST Qty',
          type: 'line',
          stack: 'Total',
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 13,
          // lineStyle: {
          //    color: '#00ca95',
          // },
          label: {
            show: true,
            position: 'top',
            fontSize: 14,
            color: '#00ca95',
            formatter: '{c}'
          },
          // itemStyle: {
          //    color: '#00ca95',
          //    borderColor: '#fff',
          //    borderWidth: 0,
          // },
          // areaStyle: {
          //    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
          //       [
          //          { offset: 0, color: 'rgba(0,202,149, 0.3)' },
          //          { offset: 1, color: 'rgba(0,202,149, 0)' },
          //       ],
          //       false
          //    ),
          //    shadowColor: 'rgba(0,202,149, 0.9)',
          //    shadowBlur: 20,
          // },
          data: [...Array(11).fill(null), 20792, 26827, 28291, 15765, 20876, 11177, 11987, 10625],
          yAxisIndex: 1
        },
      ]
    }
    return{
      load: ref(load),
      option: ref(option)
    }
  }
})
</script>

<style scoped>

</style>